Stacked Bar Chart

Compares the total value of multiple categories across different groups. Each bar represents a group, and the stacked segments within the bar represent the value of each category. This allows for a clear visualization of the total value for each group and the contribution of each category to that total. It is useful for understanding the overall magnitude and the breakdown of components within each group.

Chart:

Code:

  const { muze, getDataFromSearchQuery } = viz;

  const data = getDataFromSearchQuery();

  const ColumnField = "Year";
  const RowField = "Horsepower";
  const ColorField = "Origin";
  muze
    .canvas()
    .rows([RowField])
    .columns([ColumnField])
    .layers([
      {
        mark: "bar",
        encoding:{
          color: ColorField,
        },
        transform: { 
          type: "stack",
        },
      },
    ])
    .data(data)
    .mount("#chart") // mount your chart